<template>
  <div>
    <div>
      <div>
        <p>留言反馈</p>
      </div>

      <div class="center">
        <div>
          <p class="a">留言</p>
          <textarea placeholder="请输入内容"></textarea>
        </div>
        <div class="footer">
          <el-button type="primary"
            >立即提交</el-button
          >
          <el-button>重置</el-button>
        </div>
      </div>
    </div>
    <div class="content">
      <ul>
        <li
          @click="$router.push('/msgboard/' + item.id)"
          :key="index"
          v-for="(item, index) in list_msg"
        >
          <div style="display: flex; align-items: center; flex-direction: row">
            <img :src="item.picture" alt="" />用户:{{ item.username }}
          </div>

          <div class="left" style="width: 90%;height: 30px;">
            {{ item.content }}
          </div>
          <div class="left" style="width:90%;height: 20px;margin-top: 10px">回复:{{ item.reply }}</div>
        </li>
        <hr />
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list_msg: [],
      total: 3,
      pageNum: 1,
      pageSize: 4,
    };
  },
  methods: {
    async getMsg(pageNum, pageSize) {
      let { data: res } = await this.$axios.get("/msgboard/getlist", {
        params: {
          pageNum,
          pageSize,
        },
      });
      this.total = res.data.total;
      this.list_msg = res.data.list;
    },
    current(e) {
      this.pageNum = e;
      this.getMsg(e, this.pageSize);
    },
  },
  created() {
    this.getMsg(this.pageNum, this.pageSize);
  },
};
</script>
<style scoped lang="scss"  >
p {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  text-align: center;
  font-size: 40px;
}

.center {
  width: 800px;
  height: 400px;
  background-color: rgba(246, 241, 236, 0.901);
  margin: 0 auto;
  margin-bottom: 30px;
  .a {
    position: absolute;
    font-size: 20px;
    transform: translate(20px, 70px);
  }
  textarea {
    width: 600px;
    height: 200px;
    margin-top: 20px;
    margin-left: 90px;
    border-radius: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    border: 1px #fff solid;
  }
}
.footer {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
 .content {
    width: 800px;
    height: 100%;
    margin-top: 50px;
    border: 1px #999 solid;
    border-radius: 10px;
   margin: 0 auto;
  }
  ul {
    li {
      width: 100%;
      height: 150px;
      border-bottom: 1px #999 solid;
      text-align: left;
      list-style: none;
      div {
        padding: 7px;
        font-size: 20px;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      .left {
        border-radius: 10px;
        background-color: #27c3db;
        margin-left: 40px;
      }
    }
  }
</style>